<template>
	<view v-if="product && product.poiName" class="tickets-detail-base-info">
		<view class="ticket-name">
			{{product.poiName}}
		</view>

		<!-- 标签 -->
		<view v-if="product.scenicAreaLevel" class="ticket-tag">{{product.scenicAreaLevel}}级景区</view>
		<view v-for="(tag, index) in product.highlights" :key="index" class="ticket-tag">{{tag}}</view>

		<!-- 描述 -->
		<view v-if="product.intro" :class="['intro-block',status_show_all?'bottom-extra-row':'']">
			<text v-if="status_show_all">{{product.intro}}</text>

			<view v-else class="content">{{shortDescContent}}</view>

			<text 
				v-if="product.intro && (product.intro.length >= DESC_WORD_LIMIT)" 
				class="btn-read-more" 
				@click="status_show_all = !status_show_all"
				>
				{{status_show_all? '收起' : '+展开'}}
			</text>
		</view>

		<!-- 地址 -->
		<view class="map-block" @click="openMap">
			<basic-icons name="icon-location" size="32rpx"></basic-icons>

			<view class="address">{{product.address}}</view>

			<view class="map-right-icon">
				<basic-icons name="icon-map" size="36rpx"></basic-icons>
				<view>导航</view> 
			</view>
		</view>

		<!-- 开放时间 -->
		<view class="openning-time-block" @click="$emit('click:opentime')">
			<basic-icons name="icon-time" size="28rpx"></basic-icons>

			<view class="openning-time">{{product.openTime}}</view>

			<view class="">
				<text>详情</text>
				<basic-icons name="icon-arrow-right" size="22rpx"></basic-icons>
			</view>
		</view>

	</view>
</template>
<script>
import sdk from 'sdk'

export default {
	name: 'ticket-base-info',

	props: {
		product: {
			type: Object,
			required: true
		}
	},
	data() {
    return {
			status_show_all: false,
			
			DESC_WORD_LIMIT: 48
    }
	},
	
	computed: {
		shortDescContent() {
			let intro = this.product.intro || ''

      return intro.substr(0, this.DESC_WORD_LIMIT - 3)+'...'
		}
	},

	methods: {
		openMap() {
			// 更换打开地图方法，经纬度处理
			sdk.openMapVC({
				"lat": this.product.lat,
				"lng": this.product.lng,
				"address": this.product.text,
				"chainName": this.product.poiName,
			})
		}
	}
}
</script>
<style lang="less">
.tickets-detail-base-info {
	position: relative;
	z-index: 1;
	overflow: hidden;

	font-size: 28rpx;
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	margin-top: -20px;
	padding: 30rpx;
	padding-bottom: 0;

	.ticket-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx
	}

	.ticket-tag {
		.round-tag(34rpx, 8rpx);

		color: @font_tag_color;
		font-size: 20rpx;
		background-color: fade(@font_tag_color, 10%);
		margin: 10rpx 20rpx 10rpx 0;
	}

	.intro-block {
		position: relative;
		color: @font_desc_color;
		line-height: 42rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #EAEAEA;
		margin: 30rpx 0;

		.content {
			text-align: justify;
			display: block;
		}

		.btn-read-more {
			position: absolute;
			right: 0;
			bottom: 30rpx;
			background-color: #fff;
			color: @font_color;
		}
	}

	.map-block {
		.flex;
		.flex-between;
		.flex-middle;

		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		margin-top: 30rpx;

		background-image: url(https://imgs.bestwehotel.com/images/inn/1boqkKEnBY);
		background-size: 100%;

		.address {
			.flex-1;

			color: @font_small_color;
			margin-left: 18rpx;
		}

		.map-right-icon {
			color: @theme_color;
			text-align: center;
			font-size: 20rpx;
		}
	}

	.openning-time-block {
		.flex;
		.flex-middle;

		height: 100rpx;
		color: @font_color;

		.openning-time {
			.flex-1;
			.line-ellipsis;

			margin-left: 20rpx;
			color: @font_small_color;
		}
	}

	
}
</style>